<template>
	<view class="store-settled">
		<stepscontent :item="item"></stepscontent>
		<view class="p-25" v-if="isdisplay">
			<view class="br20 bg-white p-b-30">
				<view class="p-t-55 flex-content">
				<image v-if="item.one" style="width: 100%;" src="../../static/under-review.png" mode="widthFix"></image>
					<image v-if="item.tow" style="width: 100%;" src="../../static/verified.png" mode="widthFix"></image>
				</view>
				<view class="flex-content xxl m-t-30">
					{{tiptop}}
				
				</view>
				<view class="flex-content xxl m-t-15">
						{{tipbtm}}
				</view>
			</view>
		</view>
	
		<view class="content" >
			<view class="flex essential-information" v-if="!isdisplay">
				<view style="width: 10rpx; height: 50rpx;background-color: #dd6161;border-radius: 20rpx;margin-left: 30rpx; ">
					
				</view>
				<view  style="font-size: 40rpx; font-weight: 600; margin-left: 10rpx;">
					基本信息
				</view>
			</view>
			<view class="apply-form bg-white"  v-if="!isdisplay">
				<!-- 商家名称 -->
				<view class="apply-form-item  content-height flex border-btm">
					<view class="title-width">代理名称：</view>
					<view class="input-width">
					<u-input   v-model="form.name"  placeholder="请输入代理名称" required />
					</view>
					
				</view>
				
				<!-- 意向城市 -->
				<view class="apply-form-item  content-height flex border-btm">
					<view class="title-width">意向城市：</view>
					<view class="input-width">
					<u-input @click="cityShow=true"  v-model="city_name"  placeholder="请选择意向城市"  />
					</view>
				</view>
				
				<view class="apply-form-item  content-height flex border-btm">
					<view class="title-width">身份证号：</view>
					<view class="input-width">
					<u-input  v-model="form.id_card"  placeholder="请输入身份证号" required />
					</view>
					
				</view>
				
				<!-- 联系人姓名 -->
				<view class="apply-form-item  content-height flex border-btm">
					<view class="title-width">联系人姓名：</view>
					<view class="input-width">
					<u-input  v-model="form.nickname"  placeholder="请输入联系人姓名" required />
					</view>
					
				</view>

				<!-- 手机号码 -->
				<view class="apply-form-item content-height flex border-btm">
					<view class="title-width">手机号：</view>
					<view class="input-width">
					<u-input  v-model="form.mobile"  placeholder="请输入手机号码" required />
					</view>
				</view>

				<!-- 验证码 -->
				<view class="apply-form-item flex-between border-btm content-height">
					<u-input height="90"  placeholder="请输入验证码" required v-model="form.code"></u-input>
						<view slot="right" class="primary send-code-btn flex row-center" @tap="sendSmsFun">
							<u-verification-code unique-key="store-settled" ref="uCode" @change="codeChange">
							</u-verification-code>
							<view class="xs">{{codeTips}}</view>
						</view>
					
				</view>

				<!-- 验证码 -->
				<view class="apply-form-item content-height flex border-btm">
					<view class="title-width">创建账号：</view>
					<view class="input-width">
					<u-input  v-model="form.account"  placeholder="请设置登录账号(可用手机号代替)" required />
					</view>
					
				</view>

				<!-- 设置密码 -->
				<view class="apply-form-item content-height flex border-btm">
					<view class="title-width">设置密码：</view>
					<view class="input-width">
					<u-input type="password" v-model="form.password"  placeholder="请设置登录密码" required />
					</view>
				
				</view>

				<!-- 上传图片 -->
			<!-- 	<view class="apply-form-item">
					<u-field label="相关证件" label-width="160" placeholder="请上传身份证正反面" :border-bottom="false"
						required disabled />
					<view>
						<u-upload ref="uUpload" :show-progress="false" :header="{token: $store.getters.token}"
							:max-count="10" width="150" height="150" :action="action" upload-text="上传图片"
							@on-success="onSuccess"  @on-remove="onRemove" />
					</view>
					<view class="muted m-t-20 m-b-30">支持jpg、png、jpeg格式的图片，最多可上传10张</view>
				</view> -->
				
				
				<!-- 类型选择 -->
				<view class="apply-form-item flex  " style="width: 100%;height: 100rpx;"  >
					<view class="" style="width: 70rpx;">
						类型选择:
					</view>
					<view class="flex" label="" label-width="160" placeholder="请选择相关服务" :border-bottom="false"
						required disabled />
						<u-checkbox-group @change="checkboxGroupChange">
							<u-checkbox 
								@change="checkboxChange" 
								v-model="item.checked" 
								v-for="(item, index) in carList" :key="index" 
								:name="index"
								:active-color="colorConfig.primary"
							>{{item.category_name}}</u-checkbox>
						</u-checkbox-group>
					
				</view>
                  
			</view>
			<view class="m-t-20" v-if="!isdisplay">
			   					<view style="display: flex;align-items: center;justify-content: space-between;background-color: #FFFFFF;">
			   					<view class="flex essential-information">
			   						<view style="width: 10rpx; height: 50rpx;background-color: #dd6161;border-radius: 20rpx;margin-left: 30rpx; ">
			   							
			   						</view>
			   						<view  style="font-size: 40rpx; font-weight: 600; margin-left: 10rpx;">
			   							证件信息
			   						</view>
			   					</view>
			   					
			   					</view>
			   					
			   				
			   				</view>
							<view class=" bg-white certificate flex-content"   v-if="!isdisplay">
								<view class="certificate-content" v-for="(item,index) in lists" :key="index">
									<view class="certificate-char">
										{{item.name}}
									</view>
									<view class="upload-content  flex-content" @click="uploadImg(item)" :style="item.bgimg">
										<view class="" >
											
									
									<view class="flex-content" v-if="item.bgimg==''">
									<image src="../../static/camera.png" mode="widthFix"></image>
									</view>
									<view class="flex-content">
									<view class="upload-char" v-if="item.bgimg==''">
										点击上传
									</view>
										</view>
										</view>
									</view>
									</view>
								</view>
			<!-- 同意协议 -->
			<view class="apply-form-item flex" v-if="!isdisplay">
				<u-checkbox shape="circle" :active-color="colorConfig.primary" v-model="isAgree">
					<text class="sm">已阅读并同意</text>
				</u-checkbox>
				<router-link :to="{path: '/bundle/pages/server_explan/server_explan', query: {type: 3}}">
				<text class="primary sm">《入驻协议》</text>
				</router-link>
			</view>
			
			<!-- 提交申请 -->
			<view style="padding: 30rpx 20rpx 30rpx 0;" v-if="!isdisplay">
				<button type="primary" size="lg" class="br60" @tap="onSubmit">提交申请</button>
			</view>
			
			<!-- 查阅记录 -->
		<!-- 	<router-link to="/bundle/pages/settled_recode/settled_recode" v-if="!isdisplay">
				<view class="flex row-center muted">
					<u-icon name="order" size="32" />
					<view class="m-l-10">查看提交记录</view>
				</view>
			</router-link> -->
		</view>
		<block v-for="(item,index) in lists" :key="index">
			<upload-masklayer :item="item" :show="item.show" @upsuccess="upsuccess" @closepopup="closeupload"></upload-masklayer>
		</block>
		<u-select v-model="showPop" mode="single-column" value-name="id" label-name="name" :list="shopCategory"
			@confirm="confirmSelect"></u-select>
			<u-picker v-model="cityShow" mode="region" :params="params" @confirm="cityConfirm"></u-picker>
	</view>
</template>

<script>
	import {
		shopApplyRecord
	} from '@/api/shop'
	import stepscontent from "@/components/steps-content/steps-content"
	import {
		getIndexCar
	} from "@/api/car"
	import {
		getShopCategory,
		shopApply
	} from "@/api/shop"
	import {
		baseURL
	} from '@/config/app'
	import {
		sendSms
	} from '@/api/app'
	import {
		SMSType
	} from '@/utils/type'
	
	export default {
		components:{
			stepscontent
		},
		data() {
			return {
				
				lists:[
					{
						id:0,
						name:"身份证正面照",
						show:false,
						bgimg:"",
						imguri:"",
						photo:"/static/images/identity.png",
						tip:"请务必按照上面示例图上传，四角对齐，如模糊、反光、太暗、有遮挡，则不予认证"
					},
					{
						id:1,
						name:"身份证反面照",
						show:false,
						bgimg:"",
						imguri:"",
						photo:"/static/images/identity.png",
						tip:"请务必按照上面示例图上传，四角对齐，如模糊、反光、太暗、有遮挡，则不予认证"
					},
					],
				cityShow:false,
				isAgree: false,
				// 表单数据
				form: {
					cid: '',
					clabel: '',
					name: '',
					nickname: '',
					mobile: '',
					account: '',
					password: '',
					code: '',
					province:'',
					city:'',
					id_card:''
				},
				city_name:'',
				codeTips: '',
				shopCategory: [],
				showPop: false,
				action: baseURL + '/api/file/formimage',
				fileList: [],
				params:{
					province: true,
					city: true,
					area: false
				},
				carList:[],
				car_category:[],
				isdisplay:false,
				tiptop:"您的资料信息已提交！",
				tipbtm:"请耐心等候平台工作人员审核~",
				item:{
					one:false,
					tow:false
				}
			}
		},
		async onLoad() {
			// this.getShopCategoryFun();
			let res= await shopApplyRecord({
					page_size: 10,
					page_no: 1
				})
			const type=res.data.lists[0].audit_status
				if(type==1){
					this.isdisplay=true
					this.item.one=true
				}else if(type==2) {
					this.isdisplay=true
					this.item.one=true
					this.item.tow=true
					this.tiptop="您的信息已完成审核！"
					
					this.tipbtm="平台商区专员将与您电话沟通~！"
				}
			this.getIndexCarFun()
		},
		methods: {
			closeupload(id){
				this.lists[id].show=false
			},
			upsuccess(item){
			    console.log(item);
				this.lists[item.id].imguri=item.uri
				this.fileList.push(item.uri)
				this.lists[item.id].bgimg = `background-image:url(${item.uri})`
			},
			checkboxGroupChange(){},
			checkboxChange(e){
				console.log(e);
				let index = e.name;
				this.carList[index].checked = e.value;
				this.$forceUpdate();
			},
			getIndexCarFun(){
				getIndexCar().then(res=>{
					this.carList = res.data.lists
					this.carList.forEach(item=>{
						item.checked = true;
					}) 
				})
			},
			cityConfirm(e){
				console.log(e)
				let province = e.province.label;
				let city = e.city.label;
				
				this.city_name = `${province}-${city}`;
				this.form.province = province;
				this.form.city = city;
			},
			async getShopCategoryFun() {
				const {
					code,
					data
				} = await getShopCategory()
				if (code == 1) {
					this.shopCategory = data
				}
			},
			sendSmsFun() {
				if(!this.$refs.uCode.canGetCode) return
				if (!this.form.mobile) {
					this.$toast({
						title: '请填写手机号信息'
					})
					return;
				}
				sendSms({mobile: this.form.mobile, key: SMSType.SJSQYZ}).then(res => {
				    if(res.code == 1) {
				        this.$toast({title:res.msg});
				        this.$refs.uCode.start();
				    }
				})
			},
			uploadImg(item){
				this.lists[item.id].show=true
			},
			codeChange(tip) {
				this.codeTips = tip
			},
			// 提交表单
			async onSubmit() {
				const {
					form,
					isAgree,
					fileList,
					carList
				} = this
				
				let car_category = []
				
				carList.forEach(item=>{
					if(item.checked){
						car_category.push(item.id)
					}
				})
				
				console.log(car_category);
				if(car_category.length==0){
					this.$toast({
						title: '请先选择服务类型'
					})
					return 
				}
				
				const submitObj = {
					...form,
					license: fileList,
					car_category
				}
				delete submitObj.clabel
				if (!isAgree) return this.$toast({
					title: '请先同意《入驻协议》'
				})
				const {
					data,
					code,
					msg
				} = await shopApply(submitObj)
				if(code == 1) {
					this.$toast({
						title: msg
					})
					setTimeout(() => {
						this.$Router.replace({
							path: '/bundle/pages/settled_result/settled_result',
							query: {
								id: data.id
							}
						})
					},1000)
					
				}
			},
			confirmSelect(e) {
				const {
					value,
					label
				} = e[0]
				this.form.cid = value
				this.form.clabel = label
			},
			onSuccess(e) {
				this.fileList.push(e.data.base_uri)
			},
			onRemove(index) {
				this.fileList.splice(index, 1)
				console.log(index)
			},
		},

	}
</script>

<style lang="scss" scoped>
	.upload-content{
		border-radius: 10rpx;
		width: 320rpx;
		
		height: 200rpx;
		background-color: #e5e5e5;
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
		image{
			width: 70rpx;
		}
		.upload-char{
			margin-top: 10rpx;
			color: #8b8b8b;
		}
	}
	.certificate-content{
			margin-left: 0rpx;
			margin-top: 20rpx;
		}
		.certificate-content:nth-child(2){
			margin-left: 22rpx;
		}
	    .certificate{
	    	padding-bottom: 50rpx;
	    	display: flex;
	    	flex-direction: row;
	    	flex-wrap: wrap;
	    	justify-content: center;
	    }
		.certificate-char{
			margin-bottom: 20rpx;
			color: #8b8b8b;
		}
	.title-width{
		width: 173rpx;
	}
	.essential-information{
		height: 170rpx;
		display: flex;
		background-color: #FFFFFF;
		align-items: center;
	}
	.send-icon{
		width: 120rpx;
		box-shadow: 1rpx 1rpx 10rpx #7f7f7f;
		height: 120rpx;
		border-radius: 100rpx;
		border: 5rpx solid #FFFFFF;
		background-color: #6ED566;
	}
	.content-height{
		height: 100rpx;
	}
	.border-btm{
		border-bottom: 2rpx solid #E6E6E6 ;
	}
	.input-width{
		width: 550rpx;
	}
	.store-settled {
	
		min-height: 100vh;
		
		background-repeat: no-repeat;
		background-size: 100% auto;
		overflow: hidden;

		.content {
			margin-top: 20rpx;
			padding: 0 20rpx 31rpx;

			.apply-form {
				border-radius: 8px;
				padding: 0rpx 30rpx 30rpx 26rpx;

				.apply-form-item {
					
					width: 100%;
					.send-code-btn {
						height: 56rpx;
						width: 188rpx;
						color: #C60300;
					}
				}

				.primary-btn {
					width: 100%;
					height: 88rpx;
					background-color: $-color-primary;
				}
			}
		}

		// .pop-categories {
		// 	.reason-item {
		// 		padding: 24rpx 20rpx;

		// 		.reason-desc {
		// 			line-height: 46rpx;
		// 		}
		// 	}
		// }
	}
</style>
